<template>
	<div>
		<!-- 输入框表单 -->
		<el-row class="el-row-index" :gutter="20">
			<el-col :span="8">
				<el-card shadow="always">
					<el-tabs :tab-position="tabPosition" v-model="leftActiveName" style="height: 260px;">
						<el-tab-pane label="机票" name="first">
							<el-tabs style="text-align: left; font-size: 15px; " v-model="ticketActiveName"
								@tab-click="handleClick">
								<el-tab-pane label="国内机票" name="first">
									<template>
										行程类型
										<el-radio v-model="searchForm.tripTypeRadio" label="1">单程</el-radio>
										<el-radio v-model="searchForm.tripTypeRadio" label="2">往返</el-radio>
									</template>
									<template>
										<el-row style="margin-top: 10px;">
											<el-col :span="13">出发城市</el-col>
											<el-col :span="9">抵达城市</el-col>
										</el-row>
										<el-row style="margin-top: 2px;">
											<el-col :span="9">
												<el-input size="small" placeholder="出发城市" v-model="searchForm.startCity">
												</el-input>
											</el-col>
											<el-col :span="4" style="text-align: center; margin-top: 8px;">
												<i class="el-icon-refresh" @click="transformation"></i>
											</el-col>
											<el-col :span="9">
												<el-input size="small" placeholder="抵达城市" v-model="searchForm.arriveCity">
												</el-input>
											</el-col>
										</el-row>
									</template>
									<template>
										<el-row style="margin-top: 10px;">
											<el-col :span="13">出发时间</el-col>
											<el-col v-if="searchForm.tripTypeRadio == '2'" :span="9">返回时间</el-col>
										</el-row>
										<el-row style="margin-top: 2px;">
											<el-col :span="9">
												<el-date-picker :picker-options="pickerOptions"
													style="width: 100%; height: 90%;" v-model="searchForm.startDate" type="date"
													placeholder="出发日期">
												</el-date-picker>
											</el-col>
											<el-col v-if="searchForm.tripTypeRadio == '2'" :span="4"
												style="text-align: center; margin-top: 8px;">
												<i class="el-icon-s-promotion"></i>
											</el-col>
											<el-col v-if="searchForm.tripTypeRadio == '2'" :span="9">
												<el-date-picker :picker-options="pickerOptions" style="width: 100%;"
													v-model="searchForm.arriveDate" type="date" placeholder="返回日期">
												</el-date-picker>
											</el-col>
										</el-row>
									</template>
									<template>
										<el-row style="margin-top: 15px; text-align: right;">
											<el-col :span="24">
												<el-button size="small" type="primary" icon="el-icon-search"
													@click="searchFly" plain>搜索
												</el-button>
											</el-col>
										</el-row>
									</template>
								</el-tab-pane>
								<el-tab-pane label="国际机票" name="second">国际机票</el-tab-pane>
							</el-tabs>
						</el-tab-pane>
						<el-tab-pane label="酒店" name="second">酒店</el-tab-pane>
						<el-tab-pane label="景点" name="third">景点</el-tab-pane>
						<el-tab-pane label="游轮" name="fourth">游轮</el-tab-pane>
						<el-tab-pane label="玩耍" name="five">玩耍</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
			<el-col :span="16">
				<el-carousel :interval="5000" arrow="always">
					<el-carousel-item v-for="(img,index) in imgList" :key="index">
						<img :src="img.url" width="100%" height="100%">
					</el-carousel-item>
				</el-carousel>
			</el-col>
		</el-row>

		<!-- 静态页面 -->
		<el-row :gutter="20">
			<el-col :span="3">
				<h2 style="text-align: left;">世界之大</h2>
			</el-col>
			<el-col style="margin-top: 15px;" :span="21">
				<el-tabs v-model="worldActiveName">
					<el-tab-pane label="热门地点" name="first">
						<el-row :gutter="20">
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page1.jpeg" alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page2.jpeg" alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page3.jpeg" alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page4.jpeg" alt="">
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="山海沟壑" name="second">
						<el-row :gutter="20">
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page5.jpeg" alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page6.jpeg" alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page7.jpeg" alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page8.jpeg" alt="">
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="菁菁烟火" name="third">
						<el-row :gutter="20">
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page9.jpeg" alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page10.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page11.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page12.jpeg"
										alt="">
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="绿野仙踪" name="fourth">
						<el-row :gutter="20">
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page13.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page14.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page15.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page16.jpeg"
										alt="">
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>

		<!-- 静态页面 -->
		<el-row :gutter="20">
			<el-col :span="3">
				<h2 style="text-align: left;">精选特惠</h2>
			</el-col>
			<el-col style="margin-top: 15px;" :span="21">
				<el-tabs v-model="niceActiveName" @tab-click="handleClick">
					<el-tab-pane label="周边零食" name="first">
						<el-row :gutter="20">
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page17.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page18.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page19.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page20.jpeg"
										alt="">
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="地方小吃" name="second">
						<el-row :gutter="20">
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page21.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page22.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page23.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page24.jpeg"
										alt="">
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="斜塘古街" name="third">
						<el-row :gutter="20">
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page25.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page26.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page27.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page28.jpeg"
										alt="">
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="寒山寺" name="fourth">
						<el-row :gutter="20">
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page29.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page30.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">
								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page31.jpeg"
										alt="">
								</div>
							</el-col>
							<el-col :span="6">

								<div>
									<img style="width: 100%;height: 200px;" src="../../assets/images/page32.jpeg"
										alt="">
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: "Index",
		components: {},
		data() {
			return {
				ticketActiveName: 'first',
				leftActiveName: 'first',
				tabPosition: 'left',
				worldActiveName: 'first',
				niceActiveName: 'first',
				searchForm: {
					tripTypeRadio: '1',
					startCity: '',
					arriveCity: '',
					startDate: new Date(),
					arriveDate: null,
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					}
				},
				indexData: {

				},
				// 走马灯图片
				imgList: [{
					url: require('@/assets/banner/banner1.png')
				}, {
					url: require('@/assets/banner/banner2.png')
				}, {
					url: require('@/assets/banner/banner3.png')
				}, {
					url: require('@/assets/banner/banner4.png')
				}],
			}
		},
		created() {
			let vm = this
			let searchForm = vm.$cookie.get("searchForm")
			if (searchForm == null || searchForm == '') {
				return
			}
			let val = JSON.parse(searchForm)
			vm.searchForm = val
		},
		mounted() {},
		methods: {
			// load index data 
			loadIndexData() {
				console.log('to login')
				this.$router.push('/Login')
			},
			handleClick(tab, event) {
				console.log(tab, event)
			},
			transformation() {
				// 转换数据
				let vm = this
				let temp = vm.startCity
				vm.startCity = vm.arriveCity
				vm.arriveCity = temp
			},
			// 搜索航班数据
			searchFly() {
				// 组装表单数据
				let vm = this
				vm.$cookie.set('searchForm', JSON.stringify(vm.searchForm), 1);
				// 传递数据到搜索页面,然后查询结果 赋值查询结果
				vm.$router.push('/WhereGo')
			}
		}
	}
</script>

<style>
	.el-row-index {
		margin-top: 30px;
	}

	.el-tabs--top {
		border-bottom: none;
	}

	.el-tabs--left .el-tabs__active-bar.is-left {
		/* background-color: #808080; */
		width: 0px;
	}

	.el-tabs--left .el-tabs__nav-wrap.is-left::after {
		width: 0px;
	}

	.el-tabs__nav-wrap::after {
		height: 0px;
	}

	.el-input__prefix {
		width: 0px;
		height: 0px;
	}

	.el-input__inner {
		width: 100%;
	}

	.el-icon-date:before {
		content: "";
	}

	.el-input--prefix .el-input__inner {
		padding-left: 15px;
	}
</style>
